<template>
  <a-modal v-model:visible="visible" title="编辑项目权限" :footer="null">
    <div class="premis-permis">
      <a-list item-layout="horizontal" :data-source="projectList">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta
              description=""
            >
              <template #title>
                <div class="permis-item">
                  <a-checkbox v-model:checked="item.check" @click="checkClick(item)"></a-checkbox>
                  <div class="title">{{ item.name }}</div>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-modal>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: {  },
  setup() {
    const visible = ref<boolean>(false);
    const id = ref<Number|null>();
    const projectList = ref([]);
    const open = (id1) => {
      id.value = id1;
      defHttp.get({ url: `/project/get-permis?uId=${id.value}` }).then((res) => {
        if(res.rst){
          projectList.value = res.data;
        }
      });
      visible.value = true;
    };

    const checkClick = (item)=>{
      if(!item.check){
        defHttp
          .post({ url: '/project/add-permis', params: { uId: id.value, projectId: item.id } })
          .then(() => {
          });
      }else{
        defHttp
          .post({ url: '/project/delete-permis', params: { uId: id.value, projectId: item.id } })
          .then(() => {
          });
      }
    }

    return {
      visible,
      open,
      id,
      checkClick,
      projectList
    };
  },
});
</script>
  
<style lang="less" scoped>
.premis-permis{
  .permis-item{
    display: flex;
    margin-left: 20px;
    flex-direction: row;
    .title{
      margin-left: 10px;
    }
  }

}
</style>
